<!DOCTYPE html>
<html>
<head>
    <title>查询图书</title>
    <meta charset="UTF-8">

    <script src="/js/jquery.min.js"></script>
</head>
<body>

<h2>查询图书</h2>
<form>
    书名：<input type="text" id="bookName">
    出版社：<input type="text" id="pressName">
    作者：<input type="text" id="authorName">
    <input type="button" value="查询" onclick="loadBooks()">
</form>

<div >
    <table border="1">
        <tr>
            <td>ID</td>
            <td>书名</td>
            <td>作者</td>
            <td>出版社</td>
            <td>字数</td>
            <td>价格</td>
            <td>操作</td>
        </tr>
        <div id="booksInfo"></div>
    </table>
</div>

<script>
    function loadBooks() {
        $.ajax({
            type : 'GET',
            dataType : 'JSON',
            url : '/book/queryBook.do',
            data : {
                bookName : $('#bookName').val(),
                pressName : $('#actionType').val(),
                authorName : $('#authorName').val()
            },
            success : function (result) {
                if (result.code != 1000) {
                    alert(result.message);
                    return;
                }

                var books = result.data;

                var bookHtml = '';
                for (var i=0; i<books.length; i++) {
                    var book = books[i];

                    bookHtml += '<tr>\n' +
                        '            <td>'+book.id+'</td>\n' +
                        '            <td>'+book.bookName+'</td>\n' +
                        '            <td>'+book.authorName+'</td>\n' +
                        '            <td>'+book.pressName+'</td>\n' +
                        '            <td>'+book.word+'</td>\n' +
                        '            <td>'+book.price+'</td>\n' +
                        '            <td><input type="button" value="购买" onclick="buyBook('+book.id+')"></td>\n' +
                        '        </tr>';
                }

                //渲染到页面里面
                $('#booksInfo').html(bookHtml);
            }

        });
    }

    function buyBook(bookId) {
        var flag = confirm('你要购买吗？' + bookId);
        if (!flag) {
            return;
        }
        $.ajax({
            type : 'GET',
            dataType : 'JSON',
            url : '/book/buy',
            data : {
                bookId :bookId
            },
            success : function (result) {
                alert('恭喜你，购买成功!');
            }

        });
    }
</script>

</body>
</html>


